// // import React, { useState, useRef } from 'react';
// // import Moveable from 'react-moveable';

// // const PageRight = () => {
// //     // 图片列表，这里可以根据需求添加更多图片链接
// //     const imageList = [
// //         "https://www.sportsbusinessjournal.com/-/media/Images/Daily/2023/09/13/SOCIAL/SOCIAL-IMG-logo.ashx" ,
// //         'https://img.zcool.cn/community/012bb55ede4f33a801215aa04fd218.jpg',
// //         'https://tse1-mm.cn.bing.net/th/id/OIP-C.KtDfV0WZAuNwSfIoWt1M7gHaDF?w=315&h=146&c=7&r=0&o=5&dpr=1.5&pid=1.7'
// //     ];

// //     const [position, setPosition] = useState({ x: 100, y: 100 });
// //     const [size, setSize] = useState({ width: 200, height: 200 });
// //     const [selectedImage, setSelectedImage] = useState(imageList[0]);
// //     const imageRef = useRef(null);

// //     const onDrag = ({ target, left, top }) => {
// //         setPosition({ x: left, y: top });
// //     };

// //     const onResize = ({ target, width, height }) => {
// //         setSize({ width, height });
// //     };

// //     const handleImageSelect = (imageUrl) => {
// //         setSelectedImage(imageUrl);
// //         // 重置位置和大小
// //         setPosition({ x: 100, y: 100 });
// //         setSize({ width: 200, height: 200 });
// //     };

// //     return (
// //         <div style={{ display: 'flex', height: '600px' }}>
// //             {/* 左侧图片列表选择器 */}
// //             <div style={{ width: '200px', padding: '10px', borderRight: '1px solid #ccc', overflowY: 'auto' }}>
// //                 <h3>选择图片</h3>
// //                 {imageList.map((imageUrl, index) => (
// //                     <img
// //                         key={index}
// //                         src={imageUrl}
// //                         alt={`选择图片 ${index + 1}`}
// //                         style={{ width: '100%', marginBottom: '10px', cursor: 'pointer' }}
// //                         onClick={() => handleImageSelect(imageUrl)}
// //                     />
// //                 ))}
// //             </div>
// //             {/* 右侧图片操作区域 */}
// //             <div style={{ position: 'relative', flex: 1, border: '1px solid #ccc' ,overflow:'hidden'}}>
// //                 {/* 显示图片像素信息 */}
// //                 <div style={{ position: 'absolute', top: '10px', left: '10px', background: '#fff', padding: '5px', border: '1px solid #ccc' }}>
// //                     图片像素: {size.width}px x {size.height}px
// //                 </div>
// //                 <img
// //                     ref={imageRef}
// //                     src={selectedImage}
// //                     alt="可操作图片"
// //                     style={{
// //                         position: 'absolute',
// //                         left: position.x,
// //                         top: position.y,
// //                         width: size.width,
// //                         height: size.height,
// //                         cursor: 'move'
// //                     }}
// //                 />
// //                 <Moveable
// //                     target={imageRef.current}
// //                     draggable={true}
// //                     resizable={true}
// //                     onDrag={onDrag}
// //                     onResize={onResize}
// //                 />
// //             </div>
// //         </div>
// //     );
// // };

// // export default PageRight ;
// import React, { useState } from 'react'; 
// const LoginForm = () => { 
//     const [username, setUsername] = useState(''); 
//     const [password, setPassword] = useState('')
//  }; // 登录逻辑 const handleLogin = () => { // 你可以在这里处理实际的登录请求，比如 API 请求 console.log('Logging in with:', { username, password }); // 示例：如果登录成功，跳转到首页 // window.location.href = '/home'; // 或者使用 react-router 的 history.push('/home') }; // 监听回



import React, { useState } from 'react';

const LoginForm = () => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    // 登录逻辑
    const handleLogin = () => {
        // 你可以在这里处理实际的登录请求，比如 API 请求
        console.log('Logging in with:', { username, password });
        // 示例：如果登录成功，跳转到首页
        // window.location.href = '/home';  // 或者使用 react-router 的 history.push('/home')
    };
    // 监听回车键
    const handleKeyPress = (event) => {
        if (event.key === 'Enter') {
            handleLogin(); // 按回车时触发登录
        }
    };
    return (
        <div>
            <h2>Login Form</h2>
            <input
                type="text"
                placeholder="Username"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                onKeyDown={handleKeyPress} // 监听回车键
            />
            <input
                type="password"
                placeholder="Password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                onKeyDown={handleKeyPress} // 监听回车键
            />
            <button onClick={handleLogin}>Login</button>
        </div>
    );
};
export default LoginForm;